<!doctype html>

<html lang="zh" xmlns:th="https://www.thymeleaf.org">

<head>
    <title th:text="${loginName+'的个人博客'}"></title>
    <meta name="baidu_union_verify" content="7aef518d672b5859ca390cabb140abf3">
    <div th:include="include-front-custom :: head('','')"></div>
    <style>
        .swiper-container {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
        }

        .swiper-slide {
            position: relative;
        }

        .swiper-slide .content {
            width: 50%;
            max-width: 460px;
            position: absolute;
            right: 60px;
            bottom: 90px;
            z-index: 20;
        }

        @media screen and (max-width: 768px) {
            .swiper-slide .content {
                display: none;
            }
        }

        .swiper-slide .content .txt {
            padding: 20px;
            background: rgba(255, 255, 255, 0.85);
        }

        .swiper-slide .content .txt h3 {
            font-family: "BerlingskeSans Serif", Georgia, Times, serif;
            margin: 0;
            font-size: 2.3em;
            font-weight: normal;
        }

        .swiper-slide .content .txt p {
            margin: 5px 0 0;
            font-size: 1.2em;
        }

        .swiper-slide .content .link {
            border-radius: 25px;
            display: block;
            background: #008369;
            transition: .2s background;
            color: #fff;
            font-family: "BerlingskeSans Bd", Tahoma, helvetica, arial, sans-serif;
            text-align: center;
            font-weight: 400;
            font-size: 1.1em;
            line-height: 1.1em;
            padding: 10px 30px 10px;
            float: right;
            margin-top: 15px;
            text-decoration: none;
        }

        .swiper-slide .content .link:hover {
            background: #006a55;
        }

        .img-fix {
            /*margin-top: -25%;*/
            overflow: hidden;
        }

        .img-inner {
            transform: translateY(0%);
        }

        .swiper-container img {
            width: 100%;
            display: block;
        }

        .swiper-button-next, .swiper-button-prev {
            background: none;
            top: auto;
            bottom: 30px;
        }

        .swiper-button-prev {
            left: 0;
        }

        .swiper-button-next {
            right: 40px;
        }

        .swiper-button-next:before, .swiper-button-prev:before {
            font-family: "upsicons";
            position: absolute;
            display: block;
            height: 54px;
            width: 50px;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 54px;
            color: #fff;
            font-size: 68px;
        }

        .swiper-button-prev:before {
            content: '\e628';
        }

        .swiper-button-next:before {
            content: '\e62a';
        }

        .bottom-nav {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 30px;
            z-index: 10;
        }

        .ups-icon-videoplay {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
            cursor: pointer;
        }

        .ups-icon-videoplay:before {
            font-family: "upsicons";
            content: "\e680";
            font-size: 28px;
            color: white;
        }

        .stop-status.ups-icon-videoplay:before {
            content: "\e681";
        }

        .swiper-pagination {
            position: relative;
            display: inline-block;
            height: 29px;
            vertical-align: middle;
        }

        #ups-banner .swiper-pagination-bullet {
            width: 18px;
            height: 18px;
            background: #fff;
            opacity: 1;
            box-sizing: border-box;
            border: 3px solid #fff;
            margin: 0 15px;
            vertical-align: middle;
        }

        #ups-banner .swiper-pagination-bullet-active {
            background: #ffb500;
        }

        @media (max-width: 767px) {
            .swiper-button-prev:before {
                content: '\e627';
            }

            .swiper-button-next:before {
                content: '\e629';
            }

            .swiper-button-next, .swiper-button-prev {
                bottom: 10px;
            }

            .swiper-button-next:before, .swiper-button-prev:before {
                font-size: 32px;
            }

            .bottom-nav {
                bottom: 10px;
            }

            #ups-banner .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
                border-width: 2px;
                margin: 0 10px;
            }

            .ups-icon-videoplay {
                margin-right: 10px;
            }
        }
    </style>
    <link rel="stylesheet" th:href="@{/front/css/font.css}"/>
</head>

<body class="nobg">
<header th:replace="include-front-custom :: header"></header>
<!--内容区开始-->
<div class="container">
    <!--最新文章-->
    <section class="mysection">
        <!--轮播图开始-->
        <div id="ups-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" th:each="carouselMap:${carouselMaps}">
                        <div class="content">
                            <div class="txtXXXX"><h3 th:text="${carouselMap.title}" style="background:none;"></h3>
                                <p th:text="${carouselMap.subTitle}"></p>
                            </div>
                            <!-- <a th:target="${(carouselMap.target=='1')?'_blank':''}"
                               th:href="${'/f/carouselMap/'+carouselMap.carouselId+'?url='+carouselMap.url}"
                               class="link">详情点击</a> -->
                         </div>
                        <div class="img-fix">
                            <div class="img-inner">
                                <img th:src="${carouselMap.imgUrl}" class="imgs">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="ups-icon-videoplay"></div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
        <!-- 轮播图结束-->

        <div class="arclist">
            <h4 class="index-title">
	            <a th:href="${'/bbs/'+loginName+'.html'}">
	            	<i class="fa fa-home"></i>首页 &nbsp;&gt; 
	            </a>
	            <span class="orange-text" th:text="${funcName}"></span>
	            <span style="float:right;margin-right:10px;">共有文章:
	            	<font class="orange-text" th:text="${blogs.total}">  </font>篇
	            </span>
	        </h4>
            <!--列表开始-->
            <ul>
                <li th:each="blog:${blogs.list}" th:class="${blog.support=='1'?'tuijian':''}">
                    <div class="arcimg"  th:onclick="viewBlog([[${+blog.blogId}]]);">
                        <img th:src="${blog.headerImg}" th:alt="${blog.title}" th:title="${blog.title}"/>
                    </div>
                    <div class="arc-right">
                        <h4 class="blue-text">
                            <a th:href="${'/bbs/'+loginName+'/'+funcId+'/'+blog.blogId+'.html'}"
                               th:title="${blog.title}"
                               th:text="${blog.title}">
                            </a>
                        </h4>
                        <p th:text="${blog.summary}"></p>
                        <ul>
                            <li>
                                <a th:title="${'ls2008'+#dates.format(blog.createTime, 'yyyy-MM-dd')+'发表'}">
                                    <i class="fa fa-clock-o"></i>
                                    <span th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd')}"></span>
                                </a>
                            </li>
                            <li>
                                <a href="/f/about.html" title="作者： ls2008"><i class="fa fa-user"></i>ls2008</a>
                            </li>
                            <li>
                              	<a th:title="${'已有'+blog.commentCount+'条评论'}" th:href="${'/bbs/'+loginName+'/'+funcId+'/'+blog.blogId+'.html#Comment'}">
	                                <i class="fa fa-comments-o"></i>
	                                <span th:text="${blog.commentCount}"></span>
	                            </a>
                            </li>
                            <li><a th:title="${'已有'+blog.click+'次浏览'}"><i class="fa fa-eye"></i><span
                                    th:text="${blog.click}"></span></a></li>
                            <!-- <li>
                                <a th:href="${'/f/category/'+blog.categoryId+'.html'}" title="查看分类">
                                    <i class="fa fa-list-ul"></i>
                                    <span th:text="${blog.categoryTitle}"></span>
                                </a>
                            </li> -->
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!--分页开始-->
        <div th:replace="navigation :: navigation(${blogs},'bbs/'+${loginName},${funcId})"></div>
        <!--分页结束-->
    </section>
    <!--左侧结束-->

    <th:block th:replace="include-front-custom :: side"/>
</div>
<th:block th:replace="include-front-custom :: footer"/>
<!-- Initialize Swiper -->
<script>
    $(function () {
        var upsSwiper = new Swiper('.swiper-container', {
            speed: 1000,
            longSwipes: false,
            loop: true,
            autoplay: {
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on: {
                autoplayStop: function () {
                    this.$el.find(".ups-icon-videoplay").addClass('stop-status');
                },
                autoplayStart: function () {
                    this.$el.find(".ups-icon-videoplay").removeClass('stop-status');
                },

            }
        });

        upsSwiper.$el.find(".ups-icon-videoplay").on('click', function () {
            if (upsSwiper.autoplay.running) {
                upsSwiper.autoplay.stop();
            } else {
                upsSwiper.autoplay.start();
            }
        });
    });
    
    //点击图片跳转到博客明细
    function viewBlog(blogId){
    	window.location.href='/bbs/[[${loginName}]]/[[${funcId}]]/'+blogId+'.html';
    }
</script>
</body>
</html>